<template>
    <div class="my-date">
        <el-date-picker
            @change="handleChangeDate"
            v-model="timeTemps"
            :value-format="formatDate"
            type="datetimerange"
            :align="align"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']"
            :picker-options="pickerOptions"
        >
        </el-date-picker>
    </div>
</template>

<script>

export default {
    data() {
        return {
            // selectDateValue: [],  // 选择日期存放的值
            timeTemps:[],
            pickerOptions: {      // 配置快捷日期选择
                shortcuts: [
                    {
                        text: "今天",
                        onClick(picker) {
                            const start = new Date();
                            start.setHours(0);
                            start.setMinutes(0);
                            start.setSeconds(0);
                            const end = new Date();
                            picker.$emit("pick", [start,end]);
                        },
                    },
                    {
                        text: "昨天",
                        onClick(picker) {
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24);
                            start.setHours(0);
                            start.setMinutes(0);
                            start.setSeconds(0);
                            const end = new Date();
                            end.setTime(end.getTime() - 3600 * 1000 * 24);
                            end.setHours(23);
                            end.setMinutes(59);
                            end.setSeconds(59);
                            picker.$emit("pick", [start,end]);
                        },
                    },
                    {
                        text: "最近一周",
                        onClick(picker) {
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            start.setHours(0);
                            start.setMinutes(0);
                            start.setSeconds(0);
                            const end = new Date();
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "最近一个月",
                        onClick(picker) {
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            start.setHours(0);
                            start.setMinutes(0);
                            start.setSeconds(0);
                            const end = new Date();
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "最近三个月",
                        onClick(picker) {
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 89);
                            start.setHours(0);
                            start.setMinutes(0);
                            start.setSeconds(0);
                            const end = new Date();
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "最近一年",
                        onClick(picker) {
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 360);
                            start.setHours(0);
                            start.setMinutes(0);
                            start.setSeconds(0);
                            const end = new Date();
                            picker.$emit("pick", [start, end]);
                        },
                    },
                ],
            },
        };
    },
    props: {
        // 日期格式  默认 yyyy-MM-dd
        formatDate: {
            type: String,
            required: false,
            default: "yyyy-MM-dd HH:mm:ss",
        },
        // 日期选择界面的 对齐方式 默认 居中(center)
        align: {
            type: String,
            required: false,
            default: "center",
        },
        selectDateValue:{
            type:Array,
            default:()=>[]
        }
    },
    watch:{
      selectDateValue:{
          handler(val){
              this.timeTemps = val
          }
      }
    },
    methods: {
        // 选择日期触发的事件
        handleChangeDate(val) {
            console.log(val)
            this.timeTemps = val;
            this.$emit("changeDate", this.timeTemps);
        }
    },
};
</script>
